import React from 'react';
import { Row, Col, Spin, Modal } from 'antd';
import moment from 'moment';
import { messages } from 'share/common';
import contractStatus from 'containers/approve/contract/contract-status';
import Condition from 'components/condition';
import IeFileUpload from 'components/template/ie-file-upload/ie-file-upload';
import FileUpload from 'components/file-upload';
const { If, Else } = Condition;

class DocumentBasicInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      detailLoading: true,
      previewVisible: false,
      previewImage: ''
    };
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.params.businessCode) {
      this.setState({ detailLoading: false });
    }
    this.setState({
      data: nextProps.params
    });
  }

  renderList = (title, value, linkId) => {
    return (
      <Row style={{ fontSize: '12px', lineHeight: '32px', overflow: 'hidden' }} className="list-info">
        <Col span={8}>
          <Row>
            <Col style={{ textAlign: 'right', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} span={20}>
              <span title={title}>{title}</span>
            </Col>
            <Col span={4} style={{ textAlign: 'center' }}>:</Col>
          </Row>
        </Col>
        <Col style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} span={16}>
          {
            linkId ? <a title={value}>{value}</a> : <span title={value} className="content">{value}</span>
          }
        </Col>
      </Row>
    );
  };
  /**
   * 点击链接 图片预览
   */
  onPreviewClick = (e, src) => {
    e.preventDefault();
    this.setState({
      previewVisible: true,
      previewImage: src
    });
  };
  /**
   * 预览取消
   */
  previewCancel = () => {
    this.setState({
      previewVisible: false
    });
  };

  render() {
    const { data, detailLoading } = this.state;
    //图片预览
    const { previewImage, previewVisible } = this.state;
    return (
      <Spin spinning={detailLoading}>
        <div style={{ marginBottom: '14px' }} className="header-title">
          <Row style={{ borderBottom: '1px solid #ececec' }}>
            <Col span={8}>{data.formName}</Col>
            <Col span={4}>
              {!this.props.noHeader ? this.renderList(messages('common.document.code'), data.businessCode) : null}
            </Col>
            <Col span={2}>
              {!this.props.noHeader ? this.renderList(messages('common.apply.data'), moment(data.createdDate).format('YYYY-MM-DD')) : null}
            </Col>
            <Col span={4}>
              {!this.props.noHeader ? this.renderList(messages('common.create.person'), data.createByName) : null}
            </Col>
            <Col span={6}>
              {this.props.children}
            </Col>
          </Row>
        </div>
        <Row>
          <Col span={16}>
            <Row>
              {
                (this.state.data.infoList && this.state.data.infoList.length) && this.state.data.infoList.map((item, index) => {
                  return (
                    <Col key={index} span={6}>
                      {item && this.renderList(item.label, item.value, item.linkId)}
                    </Col>
                  );
                })
              }
            </Row>
            <Row>
              {
                (this.state.data.customList && this.state.data.customList.length) && this.state.data.customList.map((item, index) => {
                  return (
                    <Col key={index} span={6}>
                      {this.renderList(item.label, item.value)}
                    </Col>
                  );
                })
              }
            </Row>
            <Row>
              <Col span={24}>
                <Row style={{ fontSize: '12px', lineHeight: '32px', overflow: 'hidden', }} className="list-info">
                  <Col span={2}>
                    <Row>
                      <Col style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'right' }} span={20}>
                        <span>{messages('common.comment')}</span>
                      </Col>
                      <Col span={4} style={{ textAlign: 'center' }}>:</Col>
                    </Row>
                  </Col>
                  <Col style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} span={22}>
                    <span title={data.remark} className="content">{data.remark}</span>
                  </Col>
                </Row>
              </Col>
            </Row>
            {
              data.attachments && data.attachments.length > 0
                ?
                <Row>
                  <Col span={24}>
                    <Row style={{ fontSize: '12px', lineHeight: '32px', overflow: 'hidden', }} className="list-info">
                      <Col span={2}>
                        <Row>
                          <Col style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'right' }} span={20}>
                            <span>{messages('common.attachments')}</span>
                          </Col>
                          <Col span={4} style={{ textAlign: 'center' }}>:</Col>
                        </Row>
                      </Col>
                      <Col style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} span={16}>
                        <Condition>
                          <If value={window.ISIE9}>
                            <IeFileUpload defaultFileList={data.attachments} disabled/>
                          </If>
                          <Else>
                            <FileUpload
                              defaultFileList={data.attachments}
                              attachmentType="INVOICE_IMAGES"
                              showFileName={false}
                              isShowDefault
                              disabled/>
                          </Else>
                        </Condition>
                      </Col>
                    </Row>
                  </Col>
                </Row>
                : '-'
            }
          </Col>
          <Col span={8}>
            <div style={{ float: 'right' }}>
              <div style={{ textAlign: 'right', fontSize: 14 }} className="amount-title">
                {messages('common.amount')}
              </div>
              <div style={{ fontSize: '20px' }} className="amount-content">
                {data.currencyCode} {this.filterMoney(data.totalAmount)}
              </div>
            </div>
            <div style={{ float: 'right', marginRight: '50px' }}>
              <div style={{ textAlign: 'right', fontSize: 14 }} className="status-title">
                {messages('common.column.status')}
              </div>
              <div style={{ fontSize: '20px' }} className="status-content">
                {contractStatus[data.statusCode] ? contractStatus[data.statusCode].label : data.statusCode}
              </div>
            </div>
          </Col>
        </Row>
        <Modal bodyStyle={{ height: '50vh' }} visible={previewVisible} footer={null} onCancel={this.previewCancel} closable={false}>
          <img alt="pictures" style={{ width: '100%', height: '100%' }} src={previewImage}/>
        </Modal>
      </Spin>
    );
  }
}

export default DocumentBasicInfo;
